<template>
    <div class="portal-container" v-if="inited">
        <jzl-page-preview v-if="isPage" :page-id="page.page_id" :show-header="false"></jzl-page-preview>
        <datas v-else-if="isForm" :win-content-id="menuId"></datas>
        <iframe v-else-if="isIframe" :src="url" frameborder="0"></iframe>
        <page-404 v-else></page-404>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import common from '../../utils/common';

    export default {
        props: [ 'winMenuId' ],
        data() {
            return {
                menuId: null,
                menu: null,
                pageId: null,
                pageCode: null,
                inited: false,
                page: null,
                url: "",
                loading: false
            }
        },
        components: {

        },
        mounted: function () {
            this.init();
        },
        watch: {
            '$route' (to, from){
                this.init();
            },
            pageTitle(title) {
                this.$utils.setTitle(title);
            }
        },
        computed: {
            isForm() {
                return this.menu && this.menu.content_type === 'NORMAL';
            },
            isPage() {
                return this.page && this.page.page_id;
            },
            isIframe() {
                return this.url && (!page || !page.page_id);
            },
            isMainMenu() {
                return common.isMainMenu('page', this.menuId)
            },
            pageTitle() {
                let title = _.get(this.menu, 'content_name');

                if(!title) title = _.get(this.page, 'page_name');

                return title;
            }
        },
        methods: {
            ...mapActions([

            ]),
            async init() {
                let menuId = this.$route.query.menuId;
                let pageId = this.$route.query.pageId;
                let pageCode = this.$route.query.pageCode;
                let url = this.$route.query.url;

                this.loading = true;
                this.inited = false;
                this.menuId = menuId || this.winMenuId;
                this.pageId = pageId;
                this.pageCode = pageCode;

                if(url) this.url = url;

                await this.refresh();

                this.loading = false;
                this.inited = true;

                this.execDefault();
            },
            async refresh() {
                if(this.menuId) {
                    this.menu = await this.$japi.menu.getMenu(this.menuId);

                    if(this.menu && this.menu.content_type === 'CUSTOMPATH') {
                        this.url = this.menu.arg0;
                    }
                }

                let page = null;

                if(this.pageCode) {
                    page = await this.$japi.page.getPageByCode(this.pageCode);
                } else if(this.pageId) {
                    page = await this.$japi.page.getPage(this.pageId);
                } else if(this.menu && this.menu.page_id) {
                    page = await this.$japi.page.getPage(this.menu.page_id);
                    // page = await this.$japiNoCache.page.getPage(this.menu.page_id);
                }

                this.page = page;
            },
            execDefault() {
                if(this.page) {
                    if(this.page.type == 3) {
                        if(this.page.url) {
                            this.$router.replace({
                                path: this.page.url,
                                params: {
                                    pageId: this.page.page_id
                                },
                                query: {
                                    pageId: this.page.page_id
                                },
                                replace: true
                            });
                        } else if(this.page.view) {
                            this.$router.replace({
                                name: this.page.view,
                                params: {
                                    pageId: this.page.page_id
                                },
                                query: {
                                    pageId: this.page.page_id
                                },
                                replace: true
                            });
                        }
                    }
                }
            }
        }
    }
</script>
